<template>
	<!-- <view>
		<view v-if="charging && status == 'ONLINE'" class="battery-icon">
			<text class="text" style="color:#000;">{{surplus}}%</text>
			<view class="charge" :style="{'--time': delayTime}"></view>
		</view>
		<view v-else-if="surplus === 255" style="text-align: center;width: 35px;">
			<text class="iconfont icon-eletrical" style="font-size:40rpx;line-height: 18px;"></text>
		</view>
		<view v-else-if="surplus>=80 && surplus <=100" class="battery-icon ">
			<text class="text hundred-percent">{{surplus}}%</text>
		</view>
		<view v-else-if="surplus >= 20 && surplus < 80" class="battery-icon ">
			<text class="text fifty-percent">{{surplus}}%</text>
		</view>
		<view v-else-if="surplus > 0 && surplus < 20" class="battery-icon ">
			<text class="text ten-percent">{{surplus}}%</text>
		</view>
	</view> -->
	
	<view>
		<view v-if="inline == 1" class="battery-icon">
			<text class="text" style="color:#000;">{{battery}}%</text>
			<view class="charge" :style="{'--time': delayTime}"></view>
		</view>
		<view v-else-if="battery === 255" style="text-align: center;width: 35px;">
			<text class="iconfont icon-eletrical" style="font-size:40rpx;line-height: 18px;"></text>
		</view>
		<view v-else-if="battery>=80 && battery <=100" class="battery-icon ">
			<text class="text hundred-percent">{{battery}}%</text>
		</view>
		<view v-else-if="battery >= 20 && battery < 80" class="battery-icon ">
			<text class="text fifty-percent">{{battery}}%</text>
		</view>
		<view v-else-if="battery > 0 && battery < 20" class="battery-icon ">
			<text class="text ten-percent">{{battery}}%</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				delayTime: ''
			}
		},
		name: 'Surplus',
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		props: {
			inline: {
				type: [String, Number],
				default: ''
			},
			battery: {
				type: [String, Number],
				default: ''
			}
			// charging: {
			// 	type: Boolean,
			// 	default: false
			// },
			// status: {
			// 	type: String,
			// 	default: ''
			// },
			// surplus: {
			// 	type: [String, Number],
			// 	default: ''
			// }
		},
		mounted() {
			let delayTime = Math.floor(Math.random() * 2)
			this.delayTime = `${delayTime}s`
		}
	}
</script>

<style scoped>
	.battery-icon {
		height: 42rpx;
		line-height: 40rpx;
		width: 70rpx;
		border-radius: 10rpx;
		top: -1rpx;
		color: #000;
		text-align: center;
		font-weight: normal;
		font-size: 18rpx;
		border: 1rpx solid #666666;
		border-radius: 5rpx;
		background: #fff;
		display: inline-block;
		position: relative;
		vertical-align: middle;
	}

	.battery-icon:before {
		background: #666666;
		content: "";
		position: absolute;
		width: 4rpx;
		bottom: 6rpx;
		right: -6rpx;
		top: 6rpx;
	}

	.battery-icon:after {
		background: #fff;
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		top: 0;
		right: 0;
	}

	.hundred-percent {
		color: #67c23a;
	}

	.fifty-percent {
		color: #fad361;
	}

	.ten-percent {
		color: #f56c6c;
	}

	.text {
		position: absolute;
		top: 0;
		left: 50%;
		z-index: 2;
		font-size: 18rpx;
		transform: translateX(-50%);
	}

	.charge {
		position: absolute;
		bottom: 0;
		left: 0;
		top: 0;
		z-index: 1;
		animation: charging 6s linear infinite var(--time)
	}

	@keyframes charging {
		0% {
			right: 60rpx;
			background-color: #f56c6c;
		}

		50% {
			right: 30rpx;
			background-color: #fad361;
		}

		100% {
			right: 0rpx;
			background-color: #67c23a;
		}
	}
</style>
